<script setup lang='ts'>
import { useUserStore } from "@/stores/useUserStore";
import { storeToRefs } from "pinia";
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)


const props = defineProps<{
  id: number;
  m_id: number;
  u_id: number;
  content: string;
  photos?: {
    url: string;
    index: number;
    min: string;
  };
  is_open: boolean;
}>()

// const emit = defineEmits(['click'])

function handleClick() {
  const redirect = `/pages/journal-detail/journal-detail?id=${props.id}&mid=${props.m_id}&uid=${props.u_id}&origin=friend`
  if (!userInfo.value) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
      success: () => {
        setTimeout(() => {
          uni.reLaunch({
            url: `/pages/login/login?redirect=${redirect}`,
          });
        }, 1000)
      }
    })

  } else {
    uni.navigateTo({
      url: redirect
    })
  }
}


</script>

<template>
  <view @click="handleClick" class='journal-item__container '
    :class="{ 'show-image': photos?.min, 'show-lock': !is_open }">
    <!-- 图片 -->
    <view class="journal-item-photo__warpper mr-20" v-if="photos?.min">
      <image class="photo" :src="photos?.min" />
    </view>
    <!-- 内容 -->
    <view class="journal-item-content__warpper">
      <uv-text :lines="3" :text="content"></uv-text>
    </view>
    <!-- 锁 -->
    <uv-icon v-if="!is_open" class="lock" name="lock-fill"></uv-icon>
  </view>
</template>

<style scoped lang='scss'>
.journal-item {
  &__container {
    padding: 28rpx 40rpx 40rpx;
    border-bottom: 1px solid #eee;
    display: flex;

    .lock {
      position: absolute;
      right: 10rpx;

    }
  }

  &-photo__warpper {
    width: 140rpx;
    height: 140rpx;
    flex-shrink: 1;

    .photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  }

}

.journal-item__container.show-image {
  .journal-item-content__warpper {
    // 当日记没有图片时，内容占满一行，否则占据 60vw 
    width: 60vw;
  }
}

.journal-item__container.show-image.show-lock {
  .journal-item-content__warpper {
    width: 58vw;
  }
}
</style>